﻿@model MyWebApp.Areas.Sys.Models.UserModel
@{
    ViewBag.Title = "用户管理";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<!-- Content Header (Page header)-->
<section class="content-header">
    <h1>@ViewBag.Title </h1>
    @*<ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i><span id="spPath"></span></a></li>
        </ol>*@
</section>
<!-- Main content -->
<section class="content">
    <div class="box box-default">
        @*<div class="box-header with-border">
                <h3 class="box-title">检索条件</h3>
                <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-tooltip="tooltip" title="隐藏" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>*@<!-- /.box-header -->
        <div class="box-body" id="divSearch">
            <div class="form-inline">
                <div class="form-group">
                    <label for="UserName">用户名：</label>
                    @Html.TextBox("UserName", "", new { @class = "form-control input-small", style = "width:150px", placeholder = "请输入姓名" })
                </div>
                <button id="btnNew" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-flat btn-sm glyphicon glyphicon-plus">新增</button>
                <button id="btnSearch" class="btn btn-primary btn-flat btn-sm glyphicon glyphicon-search">查询</button>
            </div>
        </div><!-- /.box-body -->
    </div><!-- /.box -->
    <div class="box box-info">
        @*<div class="box-header">
                <h3 class="box-title">数据列表</h3>
            </div>*@<!-- /.box-header -->
        <div class="box-body">
            <table id="tbData" class="table table-striped table-hover table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <td>用户帐号</td>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>邮件</td>
                        <td>电话</td>
                        <td>状态</td>
                        <td>创建人</td>
                        <td>创建时间</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div><!-- /.box-body -->
        <div id="processingIndicator" class="overlay" style="display:none">
            @*一个loading层  js控制显示隐藏*@
            <i class="fa fa-refresh fa-spin"></i>
        </div>
    </div><!-- /.box -->
</section>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="modelForm" class="form-horizontal" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                </div>
                <div class="modal-body">
                    <p class="alert-error" id="lErrorMsg" style="display:none"></p>
                    @*@Html.AntiForgeryToken()
                @Html.ValidationSummary("", new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(p => p.UserId, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-6">
                        @Html.TextBoxFor(p => p.UserId, new { @class = "form-control", placeholder = "请输入用户账号" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(p => p.FullName, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-6">
                        @Html.TextBoxFor(p => p.FullName, new { @class = "form-control", placeholder = "请输入用户名称" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(p => p.Sex, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-4">
                        <label class="checkbox-inline">@Html.RadioButtonFor(p => p.Sex, "男") <span>男</span></label>
                        <label class="checkbox-inline">@Html.RadioButtonFor(p => p.Sex, "女") <span>女</span></label>
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(p => p.Mail, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-6">
                        @Html.TextBoxFor(p => p.Mail, new { @class = "form-control", placeholder = "请输入邮箱地址" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(p => p.Phone, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-6">
                        @Html.TextBoxFor(p => p.Phone, new { @class = "form-control" , placeholder = "请输入电话" })
                    </div>
                </div>*@
                    <div class="form-group">
                        <label for="UserId" class="col-sm-2 control-label">用户帐号</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="UserId" id="UserId" placeholder="请输入用户账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="FullName" class="col-sm-2 control-label">用户名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="FullName" id="FullName" placeholder="请输入用户名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Sex" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-4">
                            <label class="checkbox-inline"><input type="radio" name="Sex" checked value="男">男</label>
                            <label class="checkbox-inline"><input type="radio" name="Sex" value="女">女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Mail" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="Mail" id="Mail" placeholder="请输入邮箱地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Phone" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="Phone" id="Phone" placeholder="请输入电话">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="btnSave">保存</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

@section scripts{
    <script type="text/javascript">
        $().ready(function () {
            //事件绑定
            $("#btnSearch").click(function () {
                $("#tbData").DataTable().draw();  //重新绘制表格
            });
            
            initTab();

            //验证规则
            $("#modelForm").validate({
                rules: {
                    UserId: {
                        required: true, minlength: 3,
                        remote:'CheckUseridExists'
                    },
                    FullName: {
                        required: true
                    },
                    Sex: {
                        required: true
                    },
                    Mail: {
                        email: true
                    },
                    Phone: {
                        mobile: true
                    }
                },
                messages: {
                    UserId: { remote:"用户已存在，请重新输入"}
                },
                submitHandler: function () {
                    data = $("#modelForm").serialize();
                    alert(data);
                    $.ajax({
                        type: "post",
                        data: data,
                        url: "Add",
                        dataType: "json",
                        success: function (result) {
                            if (result.Code == 1) {
                                $('#myModal').modal("hide");
                                $('#modelForm')[0].reset(); //重置
                                $("#tbData").DataTable().draw();  //重新查询
                            }
                            else {
                                $("#lErrorMsg").html(result.Msg).show();
                            }
                        }
                    });
                }
            });
        });

        function initTab() {
            var srtable = $('#tbData')
                .on('processing.dt', function (e, settings, processing) {
                    //自定义loading，就是控制上面提到的loading html组件 这段照抄就好
                    $('#processingIndicator').css('display', processing ? 'block' : 'none');
                })
                .DataTable({
                    processing: false,//禁掉原生的loading，你也可以扔掉上面的代码用这个
                    "ajax": {
                        url: "GetPageData",
                        dataType: "json",
                        type: "POST",
                        dataSrc: "data",
                        data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
                            return  $.extend({}, d, {
                                //自定义参数， 此处非常要注意，d是 datatable的默认ajax参数
                                "UserName": $('#UserName').val(),
                            });

                            //var param = {};//因为服务端排序，可以新建一个参数对象
                            //param.start = d.start;//开始的序号
                            //param.length = d.length;//要取的数据的
                            //var formData = $("#divSearch").serializeArray();//把form里面的数据序列化成数组
                            //formData.forEach(function (e) {
                            //    param[e.name] = e.value;
                            //});
                            //return param;//自定义需要传递的参数。
                        },
                    },
                    //行处理回调
                    //"rowCallback": function (row, data) {
                    //    //$(row).addClass('selected');
                    //},
                    "columns": [
                        {
                            data: function (e) {//e是得到的json数组中的一个item ，可以用于控制标签的属性。
                                return '<a herf="#">' + e.UserId + '</a>'
                            }
                        },
                        { "data": "FullName" },
                        { "data": "Sex" },
                        { "data": "Mail" },
                        { "data": "Phone" },
                        { "data": "State" },
                        { "data": "CreateUser" },
                        { "data": "CreateTime" },
                        {
                            data: function (e) {
                                //return '<a data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-plus">新增</i></a>';
                                return '<a class="btn btn-default btn-xs show-detail-json"><i class="icon-edit"></i>编辑</a>';
                            }
                        }
                    ]
                });

            //事件
            $('#tbData').on('click', 'tr', function (event) {   //行事件
                    var data = srtable.row(this).data();//行数据
                    if (data != null && data.UserId != null && data.UserId > 0) {
                        //跳转
                        //window.location = 'xxx?userid=' + data.UserId;
                    }
                })
                .on('dblclick', 'td', function (event) {   //列事件
                    //$(this).css('background', '#000');
                });
        }
    </script>
}
